<template>
    <div class="home-container">
        <!---->
        <el-row :gutter="20" class="home-card">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in cardList" :key="k" class="mb20">
                <div class="home-card-item flex-x">
                    <div class="left">
                        <span>{{ v.num3 }}</span>
                        <div class="mt10">{{ v.num1 }}</div>
                    </div>
                    <div class="right">
                        <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                    </div>
                </div>
            </el-col>
        </el-row>
        <!---->
        <el-row :gutter="15" class="home-chart">
            <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
                <div style="height: 400px" ref="lineChartRef" class="line-chart"></div>
            </el-col>
            <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
                <div style="height: 400px" ref="pieChartRef" class="pie-chart"></div>
            </el-col>
        </el-row>

    </div>
</template>

<script setup name="Home">
import * as echarts from 'echarts';
import setting from './setting';
import store from '@/stores';
const { proxy } = getCurrentInstance()

const cardList = ref([])
const lineChartRef = ref()
const pieChartRef = ref()

const myCharts = ref([])
/**
 * method
 * */
const getCardData = async () => {
    let _ = proxy
    const { data: res } = await _.$H.post(_.$A.home.cardData, {})
    console.log('getCardData', res.data.cardData)
    cardList.value = res.data.cardData
}
const getLineChart = () =>{
    let chart = echarts.init(lineChartRef.value)
    chart.setOption(setting.lineChartOption)
    myCharts.value.push(chart)
}

const getPieChart = () =>{
    let chart = echarts.init(pieChartRef .value)
    chart.setOption(setting.pieChartOption)
    myCharts.value.push(chart)
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    console.log('chartResize',myCharts.value.length)
    nextTick(() => {
        for (let i = 0; i < myCharts.value.length; i++) {
            setTimeout(() => {
                (myCharts.value[i]).resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};
/** mounted*/
onMounted(()=>{
    initEchartsResize();
    getCardData()
    getLineChart()
    getPieChart()
})
/** watch*/
watch(
    () => store.menuStore.sidebarCollapse,
    (val) => {
        console.log('1',myCharts.value)
        setTimeout(() => {
            myCharts.value[0].resize()
            myCharts.value[1].resize()
        }, 300)
})
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
